<template>
  <a-mini-navbar/>
  <a-scroll-view @load-more="loadMore" :is-top="false" height="100vh">
    <a-card v-for="(item,index) in 10" :key="index">
      <image src="https://picsum.photos/200/300" style="height: 400rpx;width: 100%;border-radius: 10rpx"/>
      <view class="collect">
        <image src="/static/icon/common/cook-xihuan.png" style="width: 40rpx;height: 40rpx"/>
      </view>
      <view class="u-f-sxl m-t-20">红烧肉</view>
      <view class="m-t-20 u-f-sl f-c-3 text-box" style="position: relative" :class="{'show-text':showMore}">
        布局 元素 和谐 版式 文本 专业 布局 这是 效果 版式 展示 视觉 专业 格式 用于 示例 这是. 完美 段落 精致 样式 示例
        版式 现代 显示 一段 文本 结构 效果 精致 布局. 页面 排版 版式 显示 优雅 占位 美观 内容 填充 界面 文本 效果 页面.
        段落 文本 清晰 整洁 占位 精致 清晰 一段 组件 文本 结构 排版 填充. 文本 精致 效果 文本 示例 和谐 样式 示例 样式
        元素. 界面 一段 精致 效果 页面 文字 专业 平衡 文字.
        优雅 这是 样式 完美 样式 协调 元素 美观. 样式 组件 美观 统一 一段 效果 和谐 界面 协调 占位 排版 填充 设计 填充
        用于. 效果 结构 清晰 文字 展示 这是 示例 简洁 效果 文本 用于 显示 效果 文本 显示. 专业 视觉 协调 协调 界面 效果
        效果 简洁 组件 版式 视觉 布局. 展示 占位 专业 元素 视觉 现代 填充 格式 清晰 设计 组件. 结构 这是 格式 样式 显示
        内容 一段 协调 完美 示例 清晰.
        完美 用于 优雅 界面 简洁 界面 展示 占位 内容 显示 效果. 优雅 布局 示例 界面 文字 文字 优雅 统一 界面 占位 内容
        一段 设计 协调. 展示 清晰 用于 组件 现代 版式 组件 设计 展示 视觉 完美 整洁 段落 效果 格式 文本. 统一 元素 和谐
        显示 这是 元素 布局 协调 设计 美观 清晰. 清晰 元素 精致 视觉 展示 美观 专业 统一 优雅 这是 专业 和谐 示例.
        <view @click="showMore = !showMore" class="flex f-c-9 drop-btn">
          <up-icon :name="showMore?'arrow-up':'arrow-down'" size="12" color="#999"></up-icon>
          <view style="margin-left: 5rpx">{{ showMore ? '收起' : '展开'}}</view>
        </view>
      </view>
      <view class="flex m-t-20">
        <up-avatar :text="'李'" size="35"></up-avatar>
        <view style="margin-left: 20rpx">美食达人小美</view>
      </view>
    </a-card>
  </a-scroll-view>
</template>

<script setup lang="ts">
import AScrollView from "@/components/a-scroll-view.vue";
import {ref} from "vue";


const showMore = ref(false)
const loadMore = () => {

}
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.drop-btn{
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 0 10rpx;
}

.text-box{
  max-height: 100rpx; /* 默认显示3行左右的高度 */
  overflow: hidden;
  transition: max-height 0.5s ease;
  line-height: 1.2;
}

.show-text{
  max-height: 2000rpx;
}

.collect{
  position: absolute;
  padding: 10rpx;
  background: #f7f7f7;
  top: 30rpx;
  right: 30rpx;
  border-radius: 50%;
}
</style>
